<template lang="pug">
.age
 .time-l(
 :class="{active: index === activeIndex}"
 v-for="(item, index) in timeArr"
 @click="selectAge(index)"
 :key="index") {{item.time}}
</template>
<script>

export default {
  props: {
    timeArr: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      activeIndex: 0
    }
  },
  methods: {
    selectAge (index) {
      this.activeIndex = index
      this.$emit('selectAge', index)
    }
  }
}
</script>
<style lang="scss">
.age {
    margin-top: 25px;
    overflow-y: auto;
    padding: 0 10px;
    overflow-x: hidden;
    max-height: calc(100vh - 200px);
    .time-l {
        padding: 10px 0;
        cursor: pointer;
        font-size: 18px;
        &.active {
            background: #AACD22;
            color: #fff;
            position: relative;

        }
         &.active:after {
                content:" ";
                width: 0;
                height: 0;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-left: 8px solid #AACD22;
                position: absolute;
                right: -8px;
         }
        &:hover {
           background: #AACD22;
            color: #fff;
        }
        text-align: center;
    }
}
</style>
